<template>
  <div class="search">   
    <van-sticky>
      <div class="mian-header">
        <div class="search-header">
          <div class="back-icon" @click="goBack">
            <svg t="1638866518135" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2303" width="200" height="200"><path d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z" fill="" p-id="2304"></path></svg>
          </div>

          <div class="search-text" style="width:80%;">
            <van-field
              v-model="text"
              right-icon="search"
              :placeholder="placeholder"
              @input="changeVersion"
              @keyup.enter="submit"
            />
          </div>
        </div>
        <div class="typetag">
          <div class="type-list" v-if="typeTag == true">
            <div class="list-item" 
              v-for="(item,index) in typeList" 
              :key="index"
              :class="{ active:index === currentIndex }"
              @click="typeClick(item,index)"
            >
              <span>{{ item.text }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="searchpanel">
        <search-panel :data="searchSinger" @searchPanel="searchPanel"></search-panel>
      </div>
    </van-sticky>

    <div class="content">
      <hot-search v-if="hotFlag == true" :data="hotList" @allhotsearch="allHotSearch"></hot-search>

      <div v-if="infoTag == true">
        <div v-if="typeName == '单曲' || currentIndex == 0">
          <songs-info :data="songslist" :totalCount="totalSongs" @pagechange="pageChange"></songs-info>
        </div>
        <div v-if="typeName == '专辑'">
           <album-list :data="albumslist" :totalCount="totalAlbums" @pageChange="pageChange"></album-list>
        </div>
        <div v-if="typeName == '歌手'">
          <artists-list :data="singerlist" :totalCount="totalSingers" @pageChange="pageChange"></artists-list>
        </div>
        <div v-if="typeName == '歌单'">
          <song-sheet :data="songsheetlist"  :totalCount="totalSongsheet" @pageChange="pageChange">
          </song-sheet>
        </div>
        <div v-if="typeName == '用户'">
          <user-list :data="userlist" :totalCount="totalUsers" @pageChange="pageChange"></user-list>
        </div>
        <div v-if="typeName == 'MV'">
          <mv-list :data="mvlist" :totalCount="totalMvs" @pageChange="pageChange"></mv-list>
        </div>
        <div v-if="typeName == '歌词' || currentIndex == 6">
          <lrc-list :data="lrclist" :totalCount="totallrcs" @pageChange="pageChange"></lrc-list>
        </div>
        <div v-if="typeName == '电台'">
          <radio-list :data="radiolist" :totalCount="totalRadios" @pageChange="pageChange"></radio-list>
        </div>
        <div v-if="typeName == '视频'">
          <mv-list :data="videolist" :totalCount="totalVideos" @pageChange="pageChange"></mv-list>
        </div>
        
      </div>

    </div>
  </div>
</template>

<script>
  import { getSearchTxt, getSearchHot, getSearchInfo, getSearchDetail, getSearchSuggest } from '../../api/search'

  import HotSearch from './cpns/hot-search.vue'
  import SearchPanel from './cpns/search-panel.vue'
  import SongsInfo from './cpns/songs-info.vue'
  import AlbumList from './cpns/album-list.vue'
  import ArtistsList from './cpns/artists-list.vue'
  import SongSheet from './cpns/songsheet-list.vue'
  import UserList from './cpns/user-list.vue'
  import MvList from './cpns/mv-list.vue'
  import LrcList from './cpns/lrc-list.vue'
  import RadioList from './cpns/radio-list.vue'

  export default {
    data() {
      return {
        text: '',
        hotList:[],
        placeholder:'请输入搜索内容',
        show:false,
        timer: null,
        type:'mobile',
        value:'',
        typeList:[
          {text:'单曲',id:1},
          {text:'专辑',id:10},
          {text:'歌手',id:100},
          {text:'歌单',id:1000},
          {text:'用户',id:1002},
          {text:'MV',id:1004},
          {text:'歌词',id:1006},
          {text:'电台',id:1009},
          {text:'视频',id:1014},
          {text:'综合',id:1018},
        ],
        currentIndex:0,
        typeTag:false,
        searchSinger:[],
        limit:30,
        offset:0,
        hotFlag: true,
        infoTag: false,

        songslist:[],
        albumslist:[],
        singerlist:[],
        songsheetlist:[],
        userlist:[],
        mvlist:[],
        lrclist:[],
        radiolist:[],
        videolist:[],
        comprehensivelist:[],
        // searchFlag:false,
        totalSongs:50,
        totalAlbums:50,
        totalSingers:50,
        totalSongsheet:50,
        totalUsers:50,
        totalMvs:50,
        totallrcs:50,
        totalRadios:50,
        totalVideos:50,

        typeId:0,
        typeName:'',
        // totalCount:100,
        currentPage:1,
        pageFlag:false,
      }
    },

    components:{
      HotSearch,
      SearchPanel,
      SongsInfo,
      AlbumList,
      ArtistsList,
      SongSheet,
      UserList,
      MvList,
      LrcList,
      RadioList,
    },

    created(){
      this._getSearchTxt();
      this._getSearchHot();
    },

    methods:{

      // 网络请求
      _getSearchTxt(){
        getSearchTxt().then((res) => {
          // console.log(res);
          this.placeholder = res.data.showKeyword;
        })
      },

      _getSearchHot(){
        getSearchHot().then((res) => {
          // console.log(res);
          this.hotList = res.result.hots;
        })
      },

      _getSearchInfo(keywords,type,offset){
        let params = {
          keywords,
          type:type,
          limit:this.limit,
          offset:this.offset
        }
        getSearchInfo(params).then((res) => {
          console.log(res);
          this.songslist = res.result.songs;
          this.albumslist = res.result.albums;
          this.singerlist = res.result.artists;
          this.songsheetlist = res.result.playlists;
          this.userlist = res.result.userprofiles;
          this.mvlist = res.result.mvs;
          this.lrclist = res.result.songs;
          this.radiolist = res.result.djRadios;
          this.videolist = res.result.videos;
          // console.log(this.lrclist);
          this.totalSongs = res.result.songCount;
          this.totalAlbums = res.result.albumCount;
          this.totalSingers = res.result.artistCount;
          this.totalSongsheet = res.result.playlistCount;
          this.totalUsers = res.result.userprofileCount;
          this.totalMvs = res.result.mvCount;
          this.totallrcs = res.result.songCount;
          this.totalRadios = res.result.djRadiosCount;
          this.totalVideos = res.result.videoCount;
          // console.log(this.tabCount);
          // console.log(item);
        })
      },

      _getSearchSuggest(keywords){
        let params = {
          keywords,
          type:this.type,
        }
        getSearchSuggest(params).then((res) => {
          this.searchSinger = res.result.allMatch;
        })
      },

      goBack(){
        this.$router.back();
      },

      changeVersion(val){
        this.value = val;
        if(val !== ''){
          this.hotFlag = false;
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            // console.log(val);
            this._getSearchSuggest(val);
          },500)
        }else{
          this.typeTag = false;
          this.hotFlag = true;
          this.searchSinger = [];
          this.songslist = [];
          this.albumslist = [];
          this.singerlist = [];
          this.songsheetlist = [];
          this.userlist = [];
          this.mvlist = [];
          this.lrclist = [];
          this.radiolist = [];
          this.videolist = [];
          this.infoTag = false;
        }
      },

      submit(){
        // console.log(this.value);
        if(this.value !== ''){
          this.typeTag = true
          this.infoTag = true
          this.pageFlag = true;
          this._getSearchInfo(this.value);
          this.searchSinger = [];
        }else{
          this.typeTag = false
        }
      },

      typeClick(item,index){
        this.currentIndex = index;
        this.typeId = item.id;
        this.typeName = item.text;
        // console.log(item);
        this.tabCount = item.count;
        this._getSearchInfo(this.value,item.id);
      },

      searchPanel(item){
        // console.log(item);
        this.typeTag = true
        this.infoTag = true
        this.value = item.keyword;
        this._getSearchInfo(this.value);
        this.searchSinger = [];
      },

      pageChange(val){
        // console.log(val);
        let offset = (val - 1) * this.limit;
        let params = {
          keywords:this.value,
          offset:offset,
          type:this.typeId
        }
        getSearchInfo(params).then((res) => {
          // console.log(res);
          this.songslist = res.result.songs;
          this.albumslist = res.result.albums;
          this.singerlist = res.result.artists;
          this.songsheetlist = res.result.playlists;
          this.userlist = res.result.userprofiles;
          this.mvlist = res.result.mvs;
          this.lrclist = res.result.songs;
          this.radiolist = res.result.djRadios;
          this.videolist = res.result.videos;
        })
      },
      
      allHotSearch(){
        getSearchDetail().then((res) => {
          this.hotList = res.data;
        })
      },
    }
  }
</script>

<style scoped>
.search{
  position: relative;
}

.searchpanel{
  position: fixed;
  top: 7%;
  width: 100%;
}

.mian-header{
  background: #fafafa;
}

.search-header{
  background: #fafafa;
  display: flex;
  padding-bottom: 5px;
  align-items: center;
}

.icon{
  padding: 10px;
}

.search-text{
  border-bottom: 1px solid;
}

.type-list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
}

.list-item{
  padding-bottom: 5px;
  font-size: 13px;
}

.active{
  border-bottom: 2px solid red;
}


.content{
  padding-bottom: 70px;
}

</style>